import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lottie/lottie.dart';
import 'package:ride_rex/generated/assets.dart';

class ChatRecordVoiceView extends StatelessWidget {
  ChatRecordVoiceView(
      {Key? key,
      required this.selectedCancelArea,
      required this.selectedPressArea,
      required this.showSpeechRecognizing,
      required this.showRecognizeFailed,
      this.onCancel,
      this.onConfirm})
      : super(key: key);

  final bool selectedCancelArea;
  final bool selectedPressArea;
  final bool showSpeechRecognizing;
  final bool showRecognizeFailed;
  final Function()? onCancel;
  final Function()? onConfirm;

  final recordingViewHeight = 70.w;
  final recordingViewWidth = 160.w;

  static final double cancelButtonDy = ScreenUtil().screenHeight - 125.w - 125.w;
  static final double cancelButtonSize = 82.w;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: const Color(0xFF000000).withOpacity(0.6),
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Positioned(
            top: ScreenUtil().screenHeight * 0.5,
            left: 0,
            width: 375.w,
            child: _selectedPressAreaAnimationView(),
          ),
          Positioned(
            top: ScreenUtil().screenHeight * 0.5,
            child: _selectedCancelAreaAnimationView(),
          ),
          Positioned(
            top: cancelButtonDy,
            child: _unselectedCancelAreaView(),
          ),
          Positioned(
            top: cancelButtonDy,
            child: _selectedCancelAreaView(),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: _bottomBg(),
          ),
          Positioned(
            bottom: 30.w + ScreenUtil().bottomBarHeight * 0.5,
            child: _speakerIcon(),
          ),
        ],
      ),
    );
  }

  ///底部扇形背景
  Widget _bottomBg() => Visibility(
        visible: !showSpeechRecognizing && !showRecognizeFailed,
        child: Image.asset(
          selectedPressArea ? Assets.webpIcVoiceRecordBg1 : Assets.webpIcVoiceRecordBg2,
          width: 375.w,
          height: 125.w,
          fit: BoxFit.fill,
          color: Colors.white,
        ),
      );

  ///录音图标
  Widget _speakerIcon() => Visibility(
        visible: !showSpeechRecognizing && !showRecognizeFailed,
        child: Container(
          alignment: Alignment.center,
          child: Image.asset(
            selectedPressArea ? Assets.pngAudioSelect : Assets.pngAudioNormal,
            width: 62.w,
            height: 62.w,
            // color: Colors.blue,
          ),
        ),
      );

  Widget _selectedCancelAreaView() => Visibility(
        visible: selectedCancelArea,
        child: Transform.rotate(
          angle: 0.2,
          child: Image.asset(
            Assets.webpIcVoiceRecordCancelWhite,
            width: 82.w,
          ),
        ),
      );

  Widget _unselectedCancelAreaView() => Visibility(
        visible: !selectedCancelArea && !showSpeechRecognizing && !showRecognizeFailed,
        child: Transform.rotate(
          angle: 0.2,
          child: Image.asset(
            Assets.webpIcVoiceRecordCancelGrey,
            width: 82.w,
          ),
        ),
      );

  ///取消录音动画
  Widget _selectedCancelAreaAnimationView() => _buildSelectedAreaAnimationView(
        const Color(0xFFFA5251),
        selectedCancelArea,
      );

  ///长按录音动画
  Widget _selectedPressAreaAnimationView() => _buildSelectedAreaAnimationView(
        Colors.white,
        selectedPressArea,
      );

  Widget _buildSelectedAreaAnimationView(Color color, bool visible) {
    return Visibility(
      visible: visible,
      child: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: recordingViewWidth,
              height: recordingViewHeight,
              padding: EdgeInsets.symmetric(vertical: 20.w, horizontal: 40.w),
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(6), color: color),
              child: Lottie.asset(
                'assets/json/voice_record.json',
                width: 80.w,
                height: 35.w,
                fit: BoxFit.contain,
              ),
            ),
            ClipPath(
              clipper: _ArrowClipper(),
              child: Container(width: 10.w, height: 10.w, color: color),
            ),
          ],
        ),
      ),
    );
  }
}

class _ArrowClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, -2);
    path.lineTo(size.width, -2);
    path.lineTo(size.width / 2, size.height * 2 / 4);

    // path.moveTo(0, size.height);
    // path.lineTo(size.width / 2, size.height / 2);
    // path.lineTo(size.width, size.height);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}
